/**
 * 考评设置
 */
import { Divider, Empty, Typography } from 'antd';
import React from 'react';

const CONTENT_MAP = {
    weekly: {
        text: '周',
        time: {
            0: '星期一',
            1: '星期二',
            2: '星期三',
            3: '星期四',
            4: '星期五'
        }
    },
    monthly: {
        text: '月',
        time: {
            0: '入职满月最后3天',
            1: '入职满月最后5天',
            2: '入职满月最后10天'
        }
    },
    quarterly: {
        text: '季',
        time: {
            0: '入职满3月最后3天',
            1: '入职满3月最后5天',
            2: '入职满3月最后10天'
        }
    }
};

const INDICATORS_MAP = {
    0: '能力评估',
    1: '任务结果',
    2: '季度绩效',
    3: '人事评估'
};

export default function DetailAccessConfig({ data = [] }) {
    const settings = React.useMemo(() => data.map(item => ({ ...item, indicators: item?.indicators?.split(',') })), [
        data
    ]);

    if (settings.length === 0) {
        return <Empty />;
    }

    const renderContent = () =>
        settings.map((item = {}) => {
            const content = CONTENT_MAP[item.period];
            if (!content) {
                return null;
            }
            return (
                <div key={item.period}>
                    <div style={{ marginBottom: 24 }}>
                        <Typography.Paragraph>
                            <strong>{`${content.text}评`}</strong>
                        </Typography.Paragraph>
                        <div>
                            <div style={{ marginBottom: 10 }}>
                                <span>{`${content.text}评时间：`}</span>
                                <span>{content.time[item.periodDefine]}</span>
                            </div>
                            <div>
                                <span>{`${content.text}评指标：`}</span>
                                {item.indicators.map(key => (
                                    <span key={key} style={{ paddingRight: 16 }}>
                                        {INDICATORS_MAP[key]}
                                    </span>
                                ))}
                            </div>
                        </div>
                    </div>
                    <Divider />
                </div>
            );
        });

    return <div>{renderContent()}</div>;
}
